{% extends "blog/base.html" %}

{% block title %}
    <title>{{ settings.title }}</title>
{% endblock %}

{% block meta %}
    <meta charset="UTF-8">
    <meta name="keywords" content="{{ settings.keywords }}"/>
    <meta name="description" content="{{ settings.seo_description }}"/>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="/static/css/flexslider.css"/>
{% endblock %}

{% block content %}

    <section class="mysection">
        {% if settings.show_carousels %}
        <div class="swiper-container">
            <ul class="slides swiper-wrapper">
                {% for carousel in carousels %}
                <li class="swiper-slide">
                    <a href="{{ carousel.link }}" title="{{ carousel.name }}">
                        <img src="/media/{{ carousel.image }}"
                             alt="{{ carousel.link }}"/>
                    </a>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <span class="silde-title">{{ carousel.name }}</span>
                </li>
                {% endfor %}
            </ul>

            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        {% endif %}

        <div class="arclist">
            <h4 class="index-title homeh4"><a href=""><i class="el-certificate"></i>最新文章
                <small>News</small>
            </a></h4>
            {% include "blog/component/blog_list.html" with blogs=blog_list id="New" %}
        </div>

        <div class="arclist">
            <h4 class="index-title homeh4"><a href=""><i class="el-certificate"></i>热门文章
                <small>Hot</small>
            </a></h4>
            {% include "blog/component/blog_list.html" with blogs=blog_hot id="Hot" %}
        </div>
    </section>

{% endblock %}

{% block js %}
    <script src="/static/js/album.js"></script>
    <script src="/static/js/jquery.flexslider-min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 轮播图
            new Swiper('.swiper-container', {
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                pagination: '.swiper-pagination',
                paginationType: 'fraction',
                centeredSlides: true,
                autoplay: 4000,//自动播放时间
                autoHeight: true //自动高度

            });
            //瀑布流
            $('.su').jaliswall({item: '.su-li'});

        });
    </script>
{% endblock %}